import React, { useEffect, useRef, useState } from 'react';
import { Alert, Badge, Button, Modal, Tabs } from 'antd';
import ParamSetting, { Item } from '@/component/param-setting';
import { ParamType, ValueType } from '@/component/param-setting/enum';

const { TabPane } = Tabs;

export default function Page() {
  const inputParams = useRef<any>();
  const outputParams = useRef<any>();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [dataSource, setDataSource] = useState<any[]>([]);
  const [dataSource1, setDataSource1] = useState<Item[]>([]);
  const [inputErrorNum, setInputErrorNum] = useState<number>(0);
  const [outputErrorNum, setOutputErrorNum] = useState<number>(0);
  const ref = useRef<any>();
  useEffect(() => {
    // 模拟发请求
    setTimeout(() => {
      setDataSource([
        {
          paramCode: 's',
          paramDesc: 's',
          paramType: ParamType.对象,
          valueType: ValueType.常量,
          dataValueOptions: [],
          value: '',
          optional: true,
          objectAttr: [
            {
              paramCode: 's',
              paramDesc: 's',
              paramType: ParamType.字符串,
              valueType: ValueType.常量,
              value: '',
              dataValueOptions: [
                { name: '1', code: '2', isDefault: true },
                { name: '3', code: '4', isDefault: false },
              ],
              objectAttr: [],
              editing: false,
              optional: true,
            },
          ],
          editing: false,
        },
      ]);
      setDataSource1([
        {
          paramCode: 's',
          paramDesc: 's',
          paramType: ParamType.对象,
          valueType: ValueType.常量,
          value: '123',
          objectAttr: [
            {
              paramCode: 's',
              paramDesc: 's',
              paramType: ParamType.字符串,
              valueType: ValueType.常量,
              value: '123',
              objectAttr: [],
              editing: false,
            },
          ],
          editing: false,
        },
      ]);
    }, 2000);
  }, []);

  const showModal = () => {
    setInputErrorNum(0);
    setOutputErrorNum(0);
    setIsModalVisible(true);
  };

  const handleOk = () => {
    Promise.all([
      inputParams.current.validate(),
      outputParams.current.validate(),
    ])
      .then(() => {
        const inputValue = inputParams.current.getValue();
        const outputValue = outputParams.current.getValue();
        console.log(inputValue);
        console.log(outputValue);
        setIsModalVisible(false);
      })
      .catch((res) => {
        Promise.all([
          inputParams.current.getErrors(),
          outputParams.current.getErrors(),
        ]).then(([inputError, outputError]) => {
          setInputErrorNum(getErrorNum(inputError));
          setOutputErrorNum(getErrorNum(outputError));
        });
      });
  };

  function getErrorNum(errorList: any[]) {
    return errorList.reduce((p, n) => {
      const num = n.filter((item: any) => item.errors.length > 0).length;
      return p + num;
    }, 0);
  }

  function handleCancel() {
    setIsModalVisible(false);
  }

  return (
    <div>
      <>
        <Button type="primary" onClick={showModal}>
          Open Modal
        </Button>
        <Modal
          title="参数配置"
          visible={isModalVisible}
          onOk={handleOk}
          onCancel={handleCancel}
          destroyOnClose={true}
          width={1200}
        >
          <Tabs defaultActiveKey="1">
            <TabPane
              tab={
                <div className={'center'}>
                  入参
                  <Badge
                    style={{ marginLeft: 5 }}
                    size={'small'}
                    count={inputErrorNum}
                  />
                </div>
              }
              key="1"
              forceRender={true}
            >
              <ParamSetting
                hasOptional={true}
                dataSource={dataSource}
                ref={inputParams}
              />
            </TabPane>
            <TabPane
              tab={
                <div className={'center'}>
                  出参
                  <Badge
                    style={{ marginLeft: 5 }}
                    size={'small'}
                    count={outputErrorNum}
                  />
                </div>
              }
              key="2"
              forceRender={true}
            >
              <ParamSetting
                hasOptional={false}
                dataSource={dataSource1}
                ref={outputParams}
              />
            </TabPane>
          </Tabs>
        </Modal>
      </>
    </div>
  );
}
